<!--使用自定义指令-->
<div>

	<h1 appRoy>
  		{{title}}--其实这是一个自定义指令roy的测试
	</h1>

	<h1 appTest>自定义指令测试--test</h1>

	<!--Angular在绑定的源 和 绑定的目标 之间的一个巧妙但重要的区别。
关于源和目标的一个简单定义:如果属性出现在了模板表达式等号 (=) 的右侧，它就是一个源。如果它出现在了方括号 ([ ]) 中，并且出现在等号 (=) 的左侧，它就是一个目标-->
	<h1 [appHighlight]='color'>自定义指令测试--highlight</h1>

	<h1>温馨提示：查看代码时，请先查看roy指令、再看test指令、最后查看highlight指令</h1>
	<ul>
		在Angular中包含以下三种类型的指令：
		<li>属性指令：以元素的属性形式来使用的指令。使用@Directive() - 不会改变DOM，但是会添加额外的行为.属性型指令会修改元素的外观或者行为。 e.g. NgStyle可以修改元素的好几个样式。</li>
		<li>结构指令：通过添加和删除 DOM 元素来改变DOM的布局。.使用@Directive() - 通常会改变一个元素的DOM － 例如ngIf、ngSwitch、ngFor.</li>
		<li> 组件：作为指令的一个重要子类，组件本质上可以看作是一个带有模板的指令</li>
	</ul>

	<!--老版本可以这样，新版本。。。呵呵呵呵。。。。。-->
	<!--<h1 [appMyIf]='isShow'>结构型指令测试</h1>-->
	
	<h1 *appMyIf='isShow'>结构型指令测试</h1>
	
	<button (click)="myClick()">显示/隐藏</button>

</div>